<template>
	<view>
		<Header headerTitle='实名认证绑卡'></Header>
		<view class="addband">
			<view class="h3">身份证信息</view>
			<view class="mes">
				<view class="">身份证姓名</view>
				<input type="text" name="name" placeholder="请输入身份证姓名" placeholder-style="font-size:24rpx;color:#ACACAC;" v-model="name" />
			</view>
			<view class='line'></view>
			<view class="mes">
				<view class="">身份证号码</view>
				<input type="text" name="number" placeholder="请输入身份证号码" placeholder-style="font-size:26rpx;color:#ACACAC;" v-model="number" />
			</view>
			<view class='line'></view>
			<view class="h3">银行卡信息</view>
			<view class="mes">
				<view class="">银行手机号</view>
				<input type="number" name="phone" placeholder="请输入银行手机号" placeholder-style="font-size:26rpx;color:#ACACAC;" maxlength="11" v-model="phone" />
			</view>
			<view class='line'></view>
			<view class="mes">
				<view class="">银行卡号码</view>
				<input type="number" name="bankcard" placeholder="请输入银行卡号" placeholder-style="font-size:26rpx;color:#ACACAC;" v-model="bankcard" />
			</view>
			<view class='line'></view>
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/common/Header.vue'
	export default {
		data() {
			return {
				name:'',
				number:'',
				phone:'',
				bankcard:'',
			}
		},
		components:{
			Header
		  },
		methods: {
			
		}
	}
</script>

<style>
page {
		background-color: #f6f6f6;
	}
.addband{
	background-color: #fff;
	border-radius: 20rpx;
	border: 3rpx solid #ffff;
	margin: 40rpx;
	padding: 20rpx;
}
.addband .h3{
	font-size: 30rpx;
	font-weight: bold;
	margin: 20rpx;
}
.addband .mes{
	font-size: 28rpx;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.addband button{
	color: #fff;
	font-size: 28rpx;
	width: 471rpx; 
	height: 83rpx; 
	line-height: 90rpx;
	border-radius: 50rpx;
	background-color: #f1794f;
}
.line{
	margin:20rpx;
	width:100%;
	height:2rpx;
	background-color: #E1E1E1;
}
</style>
